<template>
  <el-dialog
    :title="title"
    :visible.sync="addVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="28%"
  >
    <el-form
      ref="form"
      :model="addDialogForm"
      :rules="rules"
      :disabled="formdisable"
      label-width="120px"
    >
      <el-form-item :label="$t('FormName')" prop="formName">
        <el-input v-model.trim="addDialogForm.formName" clearable/>
      </el-form-item>
      <el-form-item :label="$t('formPrefix')" prop="formPrefix">
        <el-input
          v-model.trim="addDialogForm.formPrefix"
          onkeyup="this.value = this.value.replace(/[\u4e00-\u9fa5]/ig,'')"
          clearable/>
      </el-form-item>
      <el-form-item :label="$t('projectCategory')" prop="category">
        <el-select
          v-model="addDialogForm.category"
          :style="{width: '100%'}"
          filterable
          clearable
          @change="getFormTypeList"
        >
          <el-option
            v-for="i in categoryList"
            :key="i.id"
            :label="`${$t(i.name)}`"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('formType')" prop="formType">
        <el-select v-model="addDialogForm.formType" :style="{width: '100%'}" clearable>
          <el-option
            v-for="i in formTypeList"
            :key="i.id"
            :label="`${$t(i.name)}`"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('formVersion')">
        <el-input
          v-model.trim="addDialogForm.version"
          onkeyup="this.value = this.value.replace(/[\u4e00-\u9fa5]/ig,'')"
          clearable/>
      </el-form-item>
      <el-form-item :label="$t('iseffective')">
        <el-switch
          v-model="addDialogForm.status"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item :label="$t('remark')">
        <el-input
          v-model.trim="addDialogForm.remark"
          :rows="2"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <span v-if="!formdisable" slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"

      >{{ $t('save') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import eFormCheckApi from '@/api/eForm/eFormCheck'
import networkTips from '@/mixins/networkTips'
export default {
  name: 'AddForm',
  components: {},
  mixins: [networkTips],
  props: {},
  data() {
    return {
      addVisible: false,
      title: '',
      formdisable: false,
      addDialogForm: { status: 1 },
      formTypeList: [],
      categoryList: [],
      rules: {
        formName: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('FormName')}`, trigger: 'blur' }
        ],
        formPrefix: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('formPrefix')}`, trigger: 'blur' },
          { min: 1, max: 3, message: `${this.$t('pleaseInput')}${this.$t('charactersLength')}`, trigger: 'blur' }
        ],
        category: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('projectCategory')}`, trigger: 'change' }
        ],
        formType: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('formType')}`, trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 确定保存
    doSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          eFormCheckApi.doAdd(this.$clearNull(this.addDialogForm)).then((res) => {
            this.netTips(res, this.handleClose, this.handleUpdate)
          })
        } else {
          return false
        }
      })
    },
    // 打开弹窗
    async openDialog(id) {
      if (id) {
        this.title = this.$t('details')
        this.formdisable = true
        const res = await eFormCheckApi.getEditForm({ formId: id })
        this.addDialogForm = res.data
        await this.getCategoryList()
        await this.getFormTypeList()
      } else {
        this.title = this.$t('add')
        this.getCategoryList()
      }
      this.addVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 项目分类
    async getCategoryList() {
      const res = await eFormCheckApi.getCategoryList({ type: 'form' })
      this.categoryList = res.data
    },
    // 表单类型
    async getFormTypeList() {
      const res = await eFormCheckApi.getFormTypeList({ category: this.addDialogForm.category })
      this.formTypeList = res.data
      this.$set(this.addDialogForm, 'formType', '')
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang='scss' scoped>
// @import "~@/assets/styles/defaultStyle.scss";
// .el-form-item {
//   margin: 0 30px 15px 0;
// }
</style>
